export const addCourseCard = (editor) => {
  const { Components,BlockManager } = editor;

  // 此组件为案例卡片组件，双击图片可以更改图片，点击text可以修改说明文字
  // 需要横向排列可以设置样式的float为left或right
  Components.addType("CourseCard", {
    model: {
      defaults: {
        name: "CourseCard",
        droppable: false,
        attributes: { class: "course-card",'data-gjs-type':'CourseCard' },
        components: [
          {
            type: "div",
            attributes: { class: "course-card-wrapper" },
            components: [
              {
                type: "image",
                attributes: {
                  src: "https://cdn4.codesign.qq.com/prototypes/2023/08/03/xDP3923q32qn08ZwlKp03/apgsmrtqzvfi3x3v/64200cfe52f6862c161ffd5c17463692.jpg",
                },
              },
              {
                type: "div",
                attributes: { class: "course-card-description" },
                components: [
                  {
                    type: "text",
                    content:
                      "三维建模课程",
                    attributes: { class: "title" },
                  },
                  {
                    type: "text",
                    content: "时间：2023/5/24 20:00 - 21:00 丨 10课时",
                    attributes: { class: "time" },
                  },
                  {
                    type: "text",
                    content: "老师：张晓霞",
                    attributes: { class: "role" },
                  },
                  {
                    type: "div",

                    attributes: { class: "info" },
                    components: [
                      {
                        type: "text",
                        content: "免费",
                        attributes: { class: "price" },
                      },
                      {
                        type: "text",
                        content: "225人参加",
                        attributes: { class: "num" },
                      },
                    ],
                  },
                ],
              },
            ],
          },
        ],
        styles: `
          .course-card-wrapper {
            border: 1px solid rgb(233, 233, 233);
            width: 318px;
            background-color: #ffffff;
          }
          .course-card-wrapper img {
            width: 100%;
            // height: 216px;
          }
          .course-card-description {
            text-align: left;
            width: 100%;
            padding: 0 10px;
            padding-bottom: 0px;
          }

          .title {
            font-weight: 500;
            font-size: 18px;
          }
          .time,.role {
            width: 100%;
            text-align: center;
            color: #aaaaaa;
            font-size: 14px;
          }
          .info {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            padding: 10px 0;
          }
          .price {
            color: #70b603;
            font-size: 24px;
          }
          .num {
            color: #aaaaaa;
            font-size: 14px;
          }
        `,
      },
    },
  });

  BlockManager.add("CourseCard", {
    label: "课程列表",
    category: "服务中心",
    media: `<svg t="1720776170824" class="icon" viewBox="0 0 1069 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19799" width="30" height="30"><path d="M645.44710768 88.86849193H410.5940696c-13.40540131 0-20.17746147-13.77111723-20.17746034-27.52962446s13.41801131-20.64406528 20.17746034-20.64406414h234.85303808c13.43062243 0 20.17746147 13.7585061 20.17746147 20.64406414s-6.70900565 27.52962333-20.17746147 27.52962446z m-315.37371933 34.44040363c-13.41801131 0-20.17746147-13.7585061-20.17746034-20.64406528V6.27962083c0-13.7585061 13.43062243-20.64406528 20.17746034-20.64406528 13.43062243 0 20.17746147 13.77111723 20.17746147 20.64406528v96.3473772q0 20.65667641-20.17746147 20.64406528z m389.18539491 0c-13.41801131 0-20.17746147-13.7585061-20.17746147-20.64406528V6.27962083C699.08132179-7.47888528 712.49933424-14.36444445 719.25878326-14.36444445c13.43062243 0 20.17746147 13.77111723 20.17746149 20.64406528v96.3473772c6.72161678 13.77111723-6.69639453 20.64406528-20.17746149 20.64406528z m134.20533875-82.57625998h-60.39366315c-13.41801131 0-20.17746147 13.7585061-20.17746147 20.64406528s13.41801131 20.64406528 20.17746147 20.64406528h60.39366315c40.26664619 0 73.81167559 34.41518251 73.81167559 75.66547968v89.46181802H128.77799081v-89.46181802c0-41.28813056 33.54502941-75.66547968 73.81167559-75.66547968h53.6720475c13.43062243 0 20.17746147-13.7585061 20.17746034-20.64406528s-6.70900565-20.64406528-20.17746034-20.64406528H195.88066075C128.77799081 40.73263558 75.09333331 95.79188336 75.09333331 164.60963725v736.35122518c0 68.81775389 53.68465749 123.87700053 120.78732744 123.87700166h657.58346126c67.10266994 0 120.7747163-55.05924779 120.77471629-123.87700166V157.68624582c-6.70900565-61.9321947-60.38105315-116.99144249-120.77471629-116.99144249z m0 929.04598072H195.88066075c-40.26664619 0-73.81167559-34.41518251-73.8116756-75.66547968V302.20731163h798.4978068v598.71571854c0 34.40257138-26.83602375 68.81775389-67.10266994 68.81775389z m-67.1026688-481.73688718H262.93288617c-13.41801131 0-20.17746147-13.77111723-20.17746035-20.65667527 0-13.7585061 6.72161678-27.51701219 20.17746035-27.51701333h523.3529014c13.41801131 0 20.17746147 13.7585061 20.17746148 20.64406528 0 20.64406528-6.70900565 27.52962333-20.17746148 27.52962332z m0 158.27957305H262.93288617c-13.41801131 0-20.17746147-13.7585061-20.17746035-20.64406528 0-13.7585061 13.41801131-20.64406528 20.17746035-20.64406528h523.3529014c13.41801131 0 20.17746147 13.7585061 20.17746148 20.64406528q0 20.63145415-20.17746148 20.64406528z m0 158.27957191H262.93288617c-13.41801131 0-20.17746147-13.7585061-20.17746035-20.64406528 0-13.7585061 13.41801131-20.64406528 20.17746035-20.64406413h523.3529014c13.41801131 0 20.17746147 13.7585061 20.17746148 20.64406413q0 20.63145415-20.17746148 20.64406528z m0 0" p-id="19800"></path></svg>`,
    select: true,
    content: { type: "CourseCard" },
  });
};
